<template>
	<view class="user_content">

		<!-- 头像和立即登录 -->
		<view class="user_top">
			<view class="left">
				<u-image :src="avater" width="160rpx" height="160rpx" shape="circle"></u-image>
				<view class="text" @click="onShowPopup" :fade="true" duration="450">
					{{nickName || '立即登录'}}
				</view>
			</view>
			<view class="user_Icon">
				<button v-show="showIcon" @click="handleClickIcon"
					style="font-size:30rpx;color:#333;background:rgb(39, 204, 126);">退出</button>
			</view>
		</view>

		<!-- 弹出层模块 小程序 -->
		<!-- #ifdef MP-WEIXIN -->
		<template>
			<u-popup :show="showPopup" :round="10" mode="bottom" @close="closeShowPopup" @open="openShowPopup">
				<view>
					<u-button @click="ongetNickName" size="large" text="点击授权"
						color="linear-gradient(120deg ,#00cccc,#33cc66)" class="custom-style"></u-button>
				</view>
			</u-popup>
		</template>
		<!-- #endif -->

		<!-- 弹出层模块 h5 -->
		<!-- #ifdef H5 -->
		<template>
			<u-popup :show="popupVisible" mode="center" @close="closeHPopup" @open="openHPopup">
				<view>
					<u-form :model="form" ref="uForm">
						<u-form-item label="用户名" prop="username">
							<u-input placeholder="请输入用户名" v-model="form.username" />
						</u-form-item>
						<u-form-item label="密码" prop="password">
							<u-input placeholder="请输入密码" v-model="form.password" />
						</u-form-item>
					</u-form>
					<!--  -->
					<button class="custom-style" @click="submit">提交</button>
				</view>
			</u-popup>
		</template>

		<!-- #endif -->


		<!-- 单元格模块 -->
		<template>
			</u-cell-group>
			<view class="user_cell">
				<u-cell-group>
					<u-cell class="cells" v-for="(item,index) in cellList" :title="item.title" :key="item.id"
						@click="onCellTitleClick(item.id)">
						<u-icon slot="icon" size="40" :name="item.name" color="#00cccc">
						</u-icon>
					</u-cell>
				</u-cell-group>
			</view>
		</template>
		<custom-tabbar :current="3"></custom-tabbar>
	</view>
</template>

<script>
	// 默认头像
	const beginAvater = 'https://pic1.zhimg.com/50/v2-6afa72220d29f045c15217aa6b275808_hd.jpg?source=1940ef5c';
	// 图片路径
	const defaultAvater = 'https://pic4.zhimg.com/v2-1a9f45b4d2a022a374bcded5cc7d0753_r.jpg?source=1940ef5c';
	// 默认昵称
	const defaultName = '大白';
	export default {
		data() {
			return {
				// 头像路径
				avater: beginAvater,
				// 显示隐藏Popup弹出层 小程序
				showPopup: false,
				// 显示隐藏Popup弹出层 h5
				popupVisible: false,
				// 初始昵称
				nickName: '',
				// 图标显示隐藏
				showIcon: false,
				// 跳转之后页面显示隐藏
				showAll: true,
				// 登录成功
				loaded: false,
				// 请先登录消息通知提示
				showNotify: false,
				// 模态框表单
				form: {
					username: '',
					password: ''
				},
				// 设置规则
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
				},
				// 单元格标题和图标的数组
				cellList: [{
						id: 1,
						title: '收藏管理',
						name: 'star-fill'
					},
					{
						id: 2,
						title: '我的关注',
						name: 'plus-circle-fill'
					},
					{
						id: 3,
						title: '联系反馈',
						name: 'integral-fill'
					},
					{
						id: 4,
						title: '关于我们',
						name: 'account-fill'
					}
				]
			}
		},
		onLoad() {
			// #ifdef H5
			// 将获取到的用户状态保存一下
			this.nickName = uni.getStorageSync('username');

			// #endif

			// #ifdef MP-WEIXIN
			// 将获取到的用户状态保存一下
			this.nickName = uni.getStorageSync('nickName');
			// this.avater = uni.getStorageSync('avater');

			// #endif

			// 保存登录状态
			this.loaded = uni.getStorageSync('loaded')
			// 更新用户状态
			if (this.loaded) {
				this.avater = defaultAvater;
				this.popupVisible = false;
				this.showIcon = true;
			}
		},
		methods: {
			// h5 提交按钮
			submit() {
				// console.log(this.form.username, this.form.password);

				// 非空校验
				if (this.form.username.trim() !== '' && this.form.password.trim() !== '') {
					// 将获取到的用户状态保存一下
					uni.setStorageSync('username', this.form.username);
					uni.setStorageSync('password', this.form.password);
					// 保存之后 更新用户状态
					this.avater = defaultAvater;
					let nickName = uni.getStorageSync('username');
					this.nickName = nickName;
					this.popupVisible = false;
					this.showIcon = true;
					// 提交之后清空表单
					this.form.username = '';
					this.form.password = '';
					this.loaded = true
					uni.setStorageSync('loaded', this.loaded)
				} else {
					// console.log(222);
					// 提示请先登录用户
					this.$nextTick(() => {
						// console.log(this.$refs.uForm);
						this.$refs.uForm.setRules(this.rules)
					})
				}

			},
			// h5 弹出层隐藏
			closeHPopup() {
				this.popupVisible = false;
			},
			// h5 弹出层显示
			openHPopup() {
				// 判断当点击授权获取头像之后不让弹出层显示
				if (this.avater == defaultAvater) {
					this.popupVisible = false;
				}
			},
			// 点击立即登录Popup弹出层显示
			onShowPopup() {
				// 小程序 弹出层显示
				// #ifdef MP-WEIXIN
				this.showPopup = true;

				// #endif

				// h5 弹出层显示
				// #ifdef H5
				this.popupVisible = true;

				// #endif
			},
			// 小程序 Popup弹出层显示
			openShowPopup() {
				// console.log('open');
				// 判断当点击授权获取头像之后不让弹出层显示
				if (this.avater == defaultAvater) {
					this.showPopup = false;
				}
			},
			// 小程序 Popup弹出层隐藏
			closeShowPopup() {
				this.showPopup = false;
				// console.log('close');
				this.showIcon = false;
			},
			// 点击授权之后获取昵称
			ongetNickName() {
				// 点击授权之后获取昵称和头像
				this.nickName = defaultName;
				this.avater = defaultAvater;
				this.loaded = true;
				// 将获取到的用户状态保存一下
				uni.setStorageSync('nickName', this.nickName);
				uni.setStorageSync('avater', this.avater);
				uni.setStorageSync('loaded', this.loaded);
				// 弹出层也要隐藏
				this.showPopup = false;
				// 显示退出图标
				this.showIcon = true
				// 消息提示框
				uni.showToast({
					title: '登录成功',
					duration: 500,
					icon: 'none'
				})
			},
			// 请先登录处理函数优化
			onShowToast() {
				// 消息提示框
				uni.showToast({
					title: '请先登录',
					duration: 500,
					icon: 'none'
				})
			},
			// 列表判断跳转
			onCellTitleClick(id) {
				// console.log(id);
				if (id === 1) {
					if (this.avater == defaultAvater) {
						uni.navigateTo({
							url: '/pages/collectionM/collectionM'
						})
					} else {
						// 否则就提示先登录，登录后才能跳转查看 调用上面该方法
						this.onShowToast()
					}
				} else if (id === 2) {
					if (this.avater == defaultAvater) {
						uni.switchTab({
							url: '/pages/selected/selected'
						})
					} else {
						// 否则就提示先登录，登录后才能跳转查看
						this.onShowToast()
					}
				} else if (id === 3) {
					if (this.avater == defaultAvater) {
						uni.navigateTo({
							url: '/pages/feedBack/feedBack'
						})
					} else {
						// 否则就提示先登录，登录后才能跳转查看
						this.onShowToast()
					}

				} else if (id === 4) {
					if (this.avater == defaultAvater) {
						uni.navigateTo({
							url: '/pages/aboutUs/aboutUs'
						})
					} else {
						// 否则就提示先登录，登录后才能跳转查看
						this.onShowToast()
					}
				}
			},
			handleClickIcon() {
				// console.log(111);
				// 判断点击之后恢复默认头像和立即登录状态
				if (this.avater == defaultAvater) {
					this.avater = beginAvater;
					this.nickName = '立即登录';
					// 退出图标也要隐藏
					this.showIcon = false;

					// 消息提示框                                                                         
					uni.showToast({
						title: '退出成功',
						duration: 500,
						icon: 'none'
					})
					this.loaded = false
					// h5 清空缓存
					uni.clearStorageSync();
				}
			}
		}
	}
</script>

<style lang="scss">
	// 头像和立即登录
	.user_top {
		background: linear-gradient(120deg, #00cccc, #33cc66);
		// background: url(https://ts1.cn.mm.bing.net/th/id/R-C.6a4f39d903bd169aff9cef7fa1764d04?rik=cCRh%2fx5FaiI81A&riu=http%3a%2f%2fpic43.photophoto.cn%2f20170411%2f0008118223882719_b.jpg&ehk=K2LcsJM7zvHVGmPrSahEWnrZZP14UAW2BufKW5rTf7w%3d&risl=&pid=ImgRaw&r=0);
		// background: url(https://ts1.cn.mm.bing.net/th/id/R-C.8db3ef6224600d13507bd057d5bb8dfd?rik=IaeLHOOzGarrDQ&riu=http%3a%2f%2fwww.51pptmoban.com%2fd%2ffile%2f2018%2f05%2f17%2fc2df099a4b206bd9517735ff2a33a020.png&ehk=2pR7d65LUSeCBXPPfBIa8ScFW9%2fV1JqZ8saDQibWAew%3d&risl=&pid=ImgRaw&r=0);
		// background: url(https://bpic.588ku.com/back_pic/05/97/96/955ec4013bc2a32.jpg);
		color: #333;
		padding: 50rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.text {
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	/deep/.uni-input-placeholder {
		margin-left: 30px;
	}

	/deep/.uni-input-input {
		margin-left: 30px;
	}

	/deep/.u-form-item__body__left__content__label {
		margin-right: 30px;
	}

	// input-placeholder /
	// 退出按钮 h5
	/* #ifdef H5 */
	/deep/uni-button:after {
		border: none;
	}

	/* #endif */

	// 退出按钮 小程序
	/* #ifdef MP-WEIXIN */
	button::after {
		border: none;
	}

	/* #endif */


	// 立即授权
	/deep/.u-button__text {
		color: #333;
	}

	// 单元格
	/deep/.u-cell__left-icon-wrap {
		margin-right: 20rpx;
		padding: 15rpx;
	}

	// 模态框 h5
	/* #ifdef H5 */
	/deep/.u-popup__content {
		width: 70%;
		padding: 60rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	/deep/.u-form-item__body__left__content__label {
		width: 140rpx;
	}

	.custom-style {
		width: 100%;
		background: linear-gradient(120deg, #00cccc, #33cc66);
		color: #fff;
		border-radius: 40rpx;
		margin-top: 40rpx;
	}

	/deep/.u-form-item__body__right__message {
		color: #00cccc;
	}

	/* #endif */
</style>
